<template>
  <div>
    <div class="params head-form">
      <el-form label-width="auto">
        <div class="params-form">
          <el-form-item label="业务分类">
            <el-cascader
              style="width: 100%"
              v-model="params.categoryId"
              :options="categoryOptions"
              :props="{ label: 'billCategoryName', value: 'billCategoryId' }"
              @change="init"
            />
          </el-form-item>
          <el-form-item label="核销状态">
            <el-select placeholder="请选择" v-model="params.cancelState" style="flex: 1" @change="init">
              <el-option v-for="(item, index) in verificationType" :value="Number(index)" :label="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="params-select">
              <el-select v-model="params.type" placeholder="请选择" style="width: 135px" @change="init">
                <el-option v-for="(item, index) in type" :label="item" :value="Number(index)" />
              </el-select>
              <collaborators-query v-model:model-value="params.partnerId" :type="params.type" @flushed="init" />
            </div>
          </el-form-item>
          <el-form-item label="编号">
            <el-input v-model="params.slipCode" placeholder="请输入编号" style="flex: 1" @keyup.enter="init" @blur="init" />
          </el-form-item>
          <el-form-item label="已收金额">
            <input-range v-model="params.amount" @change="init" />
          </el-form-item>
          <el-form-item label="创建人">
            <created-by v-model="params.createId" @change="init" />
          </el-form-item>
          <el-form-item label="添加时间">
            <el-date-picker
              v-model="params.date"
              style="flex: 1"
              type="daterange"
              range-separator="—"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              @change="init"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="业务类型">
            <el-select v-model="params.service" placeholder="请选择" style="flex: 1" @change="init">
              <el-option v-for="(item, index) in serviceType" :label="item" :value="Number(index)" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button :icon="RefreshRight" plain type="primary" @click="reset">重置</el-button>
            <el-button :icon="Plus" type="primary" @click="openAdd"> 新建 </el-button>
            <el-button :icon="Download" type="primary" @click="exportTable"> 导出 </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="total">合计金额<span>（所有筛选记录）</span></div>
    <div class="amount">
      <div>
        应收金额：<span>￥{{ count.plainMoney }}</span>
      </div>
      <div>
        已收金额：<span>￥{{ count.inMoney }}</span>
      </div>
      <div>
        未收金额：<span>￥{{ count.outMoney }}</span>
      </div>
    </div>
    <div class="table">
      <el-table :data="data" style="width: 100%" max-height="calc(100vh - 500px)">
        <el-table-column prop="slipCode" label="编号" width="160" />
        <el-table-column prop="businessType" label="业务类型" />
        <el-table-column prop="categoryName" label="业务分类" width="120">
          <template #default="scope">
            <el-space>
              {{ scope.row.categoryName || "--" }}
              <img class="edit-category" @click="openUpdateName(scope.row)" src="../../../assets/images/table-edit.png" alt="" />
            </el-space>
          </template>
        </el-table-column>
        <el-table-column prop="partner" label="合作方" min-width="260" />
        <el-table-column prop="city" label="核销状态" width="120">
          <template #default="scope">
            <el-tag type="warning" v-if="scope.row.cancelState == 1">{{ verificationType[scope.row.cancelState] }}</el-tag>
            <el-tag type="primary" v-else-if="scope.row.cancelState == 2">{{ verificationType[scope.row.cancelState] }}</el-tag>
            <el-tag type="success" v-else>{{ verificationType[scope.row.cancelState] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="应收金额" width="120">
          <template #default="scope"> ￥{{ scope.row.plainMoney }} </template>
        </el-table-column>
        <el-table-column prop="address" label="已收金额" width="120">
          <template #default="scope"> ￥{{ scope.row.inMoney }} </template>
        </el-table-column>
        <el-table-column prop="zip" label="未收金额" width="120">
          <template #default="scope"> ￥{{ scope.row.outMoney }} </template>
        </el-table-column>
        <el-table-column label="未使用金额" width="120">
          <template #default="scope"> ￥{{ scope.row.notUseMoney }} </template>
        </el-table-column>
        <el-table-column prop="addDate" label="添加时间" width="180" />
        <el-table-column prop="createBy" label="创建人" width="180" />
        <el-table-column prop="remark" label="备注" width="180">
          <template #default="scope">
            {{ scope.row.remark || "--" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="230">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="openDetail(scope.row)">详情</el-button>
            <el-button type="primary" link size="small" @click="toPath(scope.row)">支付流水</el-button>
            <el-button type="primary" link size="small" v-if="scope.row.outMoney > 0" @click="openPay(scope.row)"
              >去支付</el-button
            >
            <el-button type="primary" link size="small" v-if="scope.row.cancelState == 1" @click="openDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
        <template #empty>
          <el-empty />
        </template>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="query.current"
        v-model:page-size="query.size"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="init"
        @current-change="init"
      />
    </div>
    <el-dialog v-model="detailVisible" width="500" center align-center :show-close="false">
      <template #title>
        <div class="modal-title">
          <custom-title title="预收款单详情" /><el-icon @click="detailVisible = false">
            <Close />
          </el-icon>
        </div>
      </template>
      <div class="detail">
        <div>
          <div>
            编码：<span class="black">{{ detail.slipCode }}</span>
          </div>
          <el-tag type="warning" v-if="detail.cancelState == 1">{{ verificationType[detail.cancelState] }}</el-tag>
          <el-tag type="primary" v-else-if="detail.cancelState == 2">{{ verificationType[detail.cancelState] }}</el-tag>
          <el-tag type="success" v-else>{{ verificationType[detail.cancelState] }}</el-tag>
        </div>
        <div>
          业务分类<span class="black">{{ detail.categoryName }}</span>
        </div>
        <div>
          关联合作方<span class="black">{{ detail.partner }}</span>
        </div>
        <div>
          应收金额<span class="black">￥{{ detail.plainMoney }}</span>
        </div>
        <div>
          已回款金额<span class="black">￥{{ detail.inMoney }}</span>
        </div>
        <div>
          未回款金额<span class="black">￥{{ detail.outMoney }}</span>
        </div>
        <div>
          未使用金额<span class="black">￥{{ detail.notUseMoney }}</span>
        </div>
        <div>
          备注<span class="black">{{ detail.remark || "--" }}</span>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="addVisible" width="500" center align-center :show-close="false" @close="resetForm">
      <template #title>
        <custom-title title="新建" />
      </template>
      <el-form :model="form" label-width="auto" :rules="rules" ref="formRef">
        <el-form-item label="业务类型" prop="serviceType">
          <el-select v-model="form.serviceType">
            <el-option v-for="(item, index) in businessTypeOptions" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合作方" prop="partnerId">
          <div class="select-box">
            <el-select v-model="form.type" :disabled="Object.keys(partnerOptions).length == 1">
              <el-option v-for="(value, key) in partnerOptions" :value="key" :label="value"></el-option>
            </el-select>
            <el-select-v2
              v-model:model-value="form.partnerId"
              filterable
              remote
              :remote-method="addRemoteMethod"
              clearable
              :options="addOptions"
              :props="props"
              placeholder="请输入名称"
            />
          </div>
        </el-form-item>
        <el-form-item label="支付方式" prop="payType">
          <el-radio-group v-model="form.payType">
            <el-radio :value="1">账户支付</el-radio>
            <el-radio :value="2">现金</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="收款账户" prop="accountId" v-if="form.payType == 1">
          <el-select-v2
            v-model:model-value="form.accountId"
            filterable
            remote
            :remote-method="getPayAccount"
            clearable
            :options="payAccount"
            :props="payProps"
            placeholder="请输入关键词"
          />
        </el-form-item>
        <el-form-item label="收款金额" prop="money">
          <el-input v-model="form.money" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="收款日期" prop="receiptDate">
          <el-date-picker style="flex: 1" v-model="form.receiptDate" type="date" placeholder="请选择" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="业务分类" prop="categoryId">
          <div style="flex: 1">
            <el-cascader
              style="width: 100%"
              v-model="form.categoryId"
              :options="categoryOptions"
              :props="{ label: 'billCategoryName', value: 'billCategoryId' }"
            />
            <div class="tip">请在“系统配置-业务配置-财务设置下进行配置”</div>
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="上传凭证" prop="fileVos">
          <div>
            <el-upload class="avatar-uploader" multiple :show-file-list="false" :http-request="addCustomRequest">
              <div class="list">
                <div class="code" v-for="item in form.fileVos" :key="item">
                  <img :src="item.fileUrl" />
                  <div class="del">
                    <el-icon @click.stop="delAddImg(item)">
                      <DeleteFilled />
                    </el-icon>
                  </div>
                </div>
                <el-icon class="upload" v-if="form.fileVos && form.fileVos.length < 6">
                  <Plus />
                  <span>点击上传</span>
                </el-icon>
              </div>
            </el-upload>
            <div class="tip">注：支持{{ fileType }}格式，单张大小不超过{{ maxSize }}MB，只支持{{ maxCount }}张</div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addVisible = false">取消</el-button>
          <el-button type="primary" @click="comfirm"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="payVisible" width="600" center align-center :show-close="false" @close="resetPay">
      <template #title>
        <custom-title title="预收款单支付" />
      </template>
      <div class="info">
        订单收款单编号：<span>{{ detail.slipCode }}</span>
        <div class="card">
          <div>
            <div>
              <div>关联合作方</div>
              <div>{{ detail.partner }}</div>
            </div>
            <div>
              <div>应收金额</div>
              <div>￥{{ detail.plainMoney }}</div>
            </div>
            <div>
              <div>已收金额</div>
              <div>￥{{ detail.inMoney }}</div>
            </div>
            <div>
              <div>未收金额</div>
              <div>￥{{ detail.outMoney }}</div>
            </div>
          </div>
        </div>
      </div>
      <el-form :model="payForm" label-position="top" ref="payFormRef" :rules="payRules">
        <el-form-item label="支付方式" prop="payType">
          <el-radio-group v-model="payForm.payType">
            <el-radio :value="1" label="账户支付" />
            <el-radio :value="2" label="现金" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="本次收款金额" prop="money">
          <el-input v-model="payForm.money" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="付款日期" prop="receiptDate">
          <el-date-picker
            style="flex: 1"
            v-model="payForm.receiptDate"
            type="date"
            placeholder="请选择"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="收款账户" prop="accountId" v-if="payForm.payType == 1">
          <el-select v-model="payForm.accountId">
            <el-option
              v-for="item in account"
              :key="item.accountId"
              :value="item.accountId"
              :label="splicing(cleanArray([item.dictName, item.account, item.accountName]), '-')"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付凭证" prop="fileVos">
          <div>
            <el-upload class="avatar-uploader" multiple :show-file-list="false" :http-request="customRequest">
              <div class="list">
                <div class="code" v-for="item in payForm.fileVos" :key="item">
                  <img :src="item.fileUrl" />
                  <div class="del">
                    <el-icon @click.stop="delImg(item)">
                      <DeleteFilled />
                    </el-icon>
                  </div>
                </div>
                <el-icon class="upload" v-if="payForm.fileVos.length < 6">
                  <Plus />
                  <span>点击上传</span>
                </el-icon>
              </div>
            </el-upload>
            <div class="tip">注：支持{{ fileType }}格式，单张大小不超过{{ maxSize }}MB，只支持{{ maxCount }}张</div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="payVisible = false">取消</el-button>
          <el-button type="primary" @click="payComfirm"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="delVisible" width="400" center align-center :show-close="false">
      <div class="sure">
        <div>
          <el-icon>
            <Warning />
          </el-icon>
        </div>
        <span>此预收款单将被删除，是否继续？</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="delVisible = false">取 消</el-button>
          <el-button type="primary" @click="delItem">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="updateCategoryVisible" width="400" center align-center :show-close="false">
      <el-form :model="updateCategoryForm">
        <el-form-item label="业务分类" prop="categoryId">
          <el-cascader
            v-model="updateCategoryForm.categoryId"
            style="flex: 1"
            :options="categoryOptions"
            :props="{ label: 'billCategoryName', value: 'billCategoryId' }"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="updateCategoryVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateCategoryName">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { RefreshRight, Plus, Download } from "@element-plus/icons-vue";
import { add } from "@/apis/invoices/preCollection";
import {
  getList,
  del,
  pay,
  getCount,
  getPartnerList,
  getAdvancePaymentTree,
  updateCategory,
  exportTableData
} from "@/apis/invoices";
import { ElMessage } from "element-plus";
import { getList as getMyAccountList } from "@/apis/myAccount";
import { type, verificationType } from "@/utils/config";
import { splicing, cleanArray } from "@/utils";
import { useRoute } from "vue-router";
import uploadFile from "@/utils/uploadFile";
import { getParentList } from "@/utils/tree";
import { debounce } from "lodash";
import { mergeId } from "../method";
import exportExcel from "@/utils/exportExcel";

const route = useRoute();
const emit = defineEmits(["toPayment"]);
const categoryOptions = ref([]);
const updateCategoryForm = ref({});
const toPath = item => {
  emit("toPayment", {
    slipCode: item.slipCode,
    slipType: 3
  });
};
const payAccount = ref([]);
const resetForm = () => {
  formRef.value.resetFields();
  form.value = { fileVos: [] };
};
const serviceType = {
  3: "意向金",
  12: "售后转预收",
  18: "质保金",
  19: "押金"
};
const payProps = {
  label: "accountName",
  value: "accountId"
};
const props = {
  label: "name",
  value: "partnerId"
};
const account = ref([]);
const formRef = ref(null);
const payFormRef = ref(null);
const addOptions = ref([]);
const query = ref({
  current: 1,
  size: 10
});
const params = ref({
  serviceType: 3,
  slipCode: route.query.slipCode,
  moneyType: 2
});
const reset = () => {
  params.value = {
    serviceType: 3,
    moneyType: 2
  };
  init();
};
const resetPay = () => {
  payFormRef.value.resetFields();
  payForm.value = {
    payType: 1,
    fileVos: []
  };
};
const detailVisible = ref(false);
const addVisible = ref(false);
const payVisible = ref(false);
const delVisible = ref(false);
const updateCategoryVisible = ref(false);

//业务类型
const businessTypeOptions = [
  { label: "意向金", value: 3 },
  { label: "质保金", value: 18 },
  { label: "押金", value: 19 }
];
//合作方
const partnerOptions = ref(type);

const form = ref({
  fileVos: [],
  payType: 1,
  serviceType: ""
});
watch(
  () => form.value.serviceType,
  (newV, oldV) => {
    const originBusinessType = type;
    if (newV == 3) {
      partnerOptions.value = { 1: "客户" };
      form.value.type = "1";
    } else {
      delete originBusinessType[1];
      partnerOptions.value = originBusinessType;
      form.value.type = "";
    }
  }
);
const payForm = ref({
  payType: 1,
  fileVos: []
});
const delId = ref("");
const detail = ref({});
const total = ref(0);
const data = ref([]);
const count = ref({
  outMoney: 0,
  inMoney: 0,
  plainMoney: 0
});
/**
 * 添加校验规则
 */
const rules = {
  money: [
    { required: true, message: "请输入金额", trigger: "blur" },
    { pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: "请输入正确的金额", trigger: "blur" }
  ],
  partnerId: [{ required: true, message: "请选择收款客户", trigger: "blur" }],
  remark: [{ max: 100, message: "备注不能超过100个字符", trigger: "blur" }],
  receiptDate: [{ required: true, message: "请选择收款日期", trigger: "blur" }],
  fileVos: [{ required: true, message: "请上传收款凭证", trigger: "blur" }],
  payType: [{ required: true, message: "请选择支付方式", trigger: "blur" }],
  accountId: [{ required: true, message: "请选择收款账户", trigger: "blur" }]
};
/**
 * 支付校验规则
 */
const payRules = {
  payType: [{ required: true, message: "请选择支付方式", trigger: "blur" }],
  receiptDate: [{ required: true, message: "请选择收款日期", trigger: "blur" }],
  fileVos: [{ required: true, message: "请上传收款凭证", trigger: "blur" }],
  money: [
    { required: true, message: "请输入收款金额", trigger: "blur" },
    { pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: "请输入正确的金额", trigger: "blur" }
  ],
  accountId: [{ required: true, message: "请选择收款账户", trigger: "blur" }]
};
/**
 * 删除图片
 */
const delImg = img => {
  payForm.value.fileVos = payForm.value.fileVos.filter(item => item.fileId != img.fileId);
};
const delAddImg = img => {
  form.value.fileVos = form.value.fileVos.filter(item => item.fileId != img.fileId);
};
const getPayAccount = async key => {
  const { data: { list = [] } = {} } = await getMyAccountList({ current: 1, size: 100000 }, { status: 1, account: key });
  const accountList = list.map(v => ({ ...v, accountName: splicing(cleanArray([v.dictName, v.account, v.accountName]), "-") }));
  payAccount.value = accountList;
};

/**
 * 根据关键词查询合作方（用于新建单据）
 */
const addRemoteMethod = debounce(async key => {
  try {
    const res = await getPartnerList(form.value.type, key);
    addOptions.value = mergeId(res.data);
  } catch (error) {}
}, 300);
/**
 * 打开删除
 */
const openDel = item => {
  delId.value = item.slipId;
  delVisible.value = true;
};
const delItem = async () => {
  const res = await del(delId.value);
  if (res.code == 200) {
    init();
    ElMessage.success("删除成功");
    delVisible.value = false;
  }
};
const openDetail = async item => {
  detail.value = { ...item };
  detailVisible.value = true;
};
const openAdd = () => {
  getTime();
  addVisible.value = true;
};
const openPay = item => {
  isImgMax.value = false;
  payVisible.value = true;
  detail.value = { ...item };
};
const isImgMax = ref(false);
const maxSize = ref(20);
const maxCount = ref(6);
const fileType = ref("JPG/JPEG/PNG");
const imgRules = options => {
  const type = ["image/jpg", "image/jpeg", "image/png"];
  const { file } = options;
  if (!type.includes(file.type)) {
    ElMessage.error("图片格式错误");
    return false;
  } else if (file.size / 1024 / 1024 > maxSize.value) {
    ElMessage.error(`图片大小不能超过${maxSize.value}MB!`);
    return false;
  }
  return true;
};

const customRequest = async options => {
  if (!imgRules(options)) return;
  const fileInfo = await uploadFile(options);
  if (payForm.value.fileVos.length < maxCount.value) {
    payForm.value.fileVos.push({ fileUrl: fileInfo.url, fileName: fileInfo.name, fileId: fileInfo.uid });
  } else {
    if (!isImgMax.value) ElMessage.error(`最多上传${maxCount.value}张图片`);
    isImgMax.value = true;
  }
};

const addCustomRequest = async options => {
  if (!imgRules(options)) return;
  const fileInfo = await uploadFile(options);
  if (form.value.fileVos.length < maxCount.value) {
    form.value.fileVos.push({ fileUrl: fileInfo.url, fileName: fileInfo.name, fileId: fileInfo.uid });
  } else {
    if (!isImgMax.value) ElMessage.error(`最多上传${maxCount.value}张图片`);
    isImgMax.value = true;
  }
};
/**
 * 新增确认按钮
 */
const comfirm = () => {
  formRef.value.validate(async valid => {
    if (!valid) return;
    const categoryId = form.value.categoryId ? form.value.categoryId[form.value.categoryId.length - 1] : undefined;
    try {
      const categoryId = form.value.categoryId ? form.value.categoryId[form.value.categoryId.length - 1] : undefined;
      await add({
        ...form.value,
        categoryId,
        receiptDate: form.value.receiptDate ? form.value.receiptDate + " 00:00:00" : undefined
      });
      addVisible.value = false;
      init();
      ElMessage.success("操作成功");
    } catch (error) {
      console.log(error);
    }
  });
};
/**
 * 支付确认按钮
 */
const payComfirm = () => {
  payFormRef.value.validate(async valid => {
    if (!valid) return;
    try {
      await pay({ ...payForm.value, type: undefined, slipId: detail.value.slipId, money: Number(payForm.value.money) });
      payVisible.value = false;
      init();
      ElMessage.success("操作成功");
    } catch (error) {}
  });
};
const getTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const day = now.getDate();
  form.value.receiptDate = year + "-" + month + "-" + day;
};
const getParams = () => {
  const minAmount = params.value.amount ? params.value.amount[0] : undefined;
  const maxAmount = params.value.amount ? params.value.amount[1] : undefined;
  const createdTimeBegin = params.value.date ? params.value.date[0] + " 00:00:00" : undefined;
  const createdTimeEnd = params.value.date ? params.value.date[1] + " 23:59:59" : undefined;
  const categoryId = params.value.categoryId ? params.value.categoryId[params.value.categoryId.length - 1] : undefined;
  const paramsData = {
    ...params.value,
    minAmount,
    maxAmount,
    createdTimeBegin,
    createdTimeEnd,
    categoryId
  };
  delete paramsData.date;
  delete paramsData.amount;
  return paramsData;
};
const init = async () => {
  try {
    const res = await getList(query.value, getParams());
    data.value = res.data.list;
    total.value = res.data.total;
  } catch (error) {}
  try {
    const counts = await getCount(getParams());
    count.value = counts.data ? counts.data : { outMoney: 0, inMoney: 0, plainMoney: 0 };
  } catch (error) {}
};
const exportTable = async () => {
  try {
    const res = await exportTableData(query.value, getParams());
    exportExcel(res, "预收款单列表");
  } catch (error) {}
};
/**
 * 获取账户
 */
const getAccount = async () => {
  const {
    data: { list }
  } = await getMyAccountList({ current: 1, size: 100000 }, { status: 1 });
  account.value = list;
};
/**
 * 获取业务分类树
 */
const getCategory = async () => {
  const res = await getAdvancePaymentTree();
  categoryOptions.value = res.data;
};
/**
 * 打开修改业务分类弹窗
 */
const openUpdateName = item => {
  updateCategoryForm.value.slipId = item.slipId;
  updateCategoryForm.value.categoryId = item.categoryId
    ? getParentList(categoryOptions.value, "billCategoryId", item.categoryId).map(v => v.billCategoryId)
    : [];
  updateCategoryVisible.value = true;
};
/**
 * 修改业务分类
 */
const updateCategoryName = async () => {
  try {
    await updateCategory({
      ...updateCategoryForm.value,
      categoryId: updateCategoryForm.value.categoryId[updateCategoryForm.value.categoryId.length - 1]
    });
    init();
    ElMessage.success("修改成功");
    updateCategoryVisible.value = false;
  } catch (error) {}
};

onMounted(() => {
  init();
  getAccount();
  getCategory();
});
</script>

<style lang="scss" scoped>
@import "../comon.scss";

.params {
  .params-form {
    grid-template-columns: repeat(4, 1fr);
  }
}
</style>
